<template>
  <ul @click="onPagerClick" :class="['pager', {'pager-center': center}]">
    <li
      :class="{ active: currentPage === 1, disabled }"
      v-if="pageCount > 0"
      class="number"
    >
      1
    </li>
    <li
      class="more btn-quickprev"
      :class="[{ disabled }]"
      v-if="showPrevMore"
    >...</li>
    <li
      v-for="pager in pagers"
      :key="pager"
      :class="{ active: currentPage === pager, disabled }"
      class="number"
    >
      {{ pager }}
    </li>
    <li
      class="more btn-quicknext"
      :class="[{ disabled }]"
      v-if="showNextMore"
    >...</li>
    <li
      :class="{ active: currentPage === pageCount, disabled }"
      class="number"
      v-if="pageCount > 1"
    >
      {{ pageCount }}
    </li>
  </ul>
</template>

<script >
export default {
  name: "Pager",
  props: {
    currentPage: Number,
    pageCount: Number,
    pagerCount: Number,
    disabled: Boolean,
    center: Boolean,
  },
    data() {
    return {
      current: null,
      showPrevMore: false,
      showNextMore: false,
    };
  },
  computed: {
    pagers() {
      const pagerCount = this.pagerCount;
      const halfPagerCount = (pagerCount - 1) / 2;
      const currentPage = Number(this.currentPage);
      const pageCount = Number(this.pageCount);
      let showPrevMore = false;
      let showNextMore = false;
      if (pageCount > pagerCount) {
        if (currentPage > pagerCount - halfPagerCount) {
          showPrevMore = true;
        }
        if (currentPage < pageCount - halfPagerCount) {
          showNextMore = true;
        }
      }
      const array = [];
      if (showPrevMore && !showNextMore) {
        const startPage = pageCount - (pagerCount - 2);
        for (let i = startPage; i < pageCount; i++) {
          array.push(i);
        }
      } else if (!showPrevMore && showNextMore) {
        for (let i = 2; i < pagerCount; i++) {
          array.push(i);
        }
      } else if (showPrevMore && showNextMore) {
        const offset = Math.floor(pagerCount / 2) - 1;
        for (let i = currentPage - offset; i <= currentPage + offset; i++) {
          array.push(i);
        }
      } else {
        for (let i = 2; i < pageCount; i++) {
          array.push(i);
        }
      }
      this.showPrevMore = showPrevMore;
      this.showNextMore = showNextMore;
      return array;
    },
  },
  methods: {
    onPagerClick(event) {
      const target = event.target;
      if (target.tagName === "UL" || this.disabled) {
        return;
      }
      let newPage = Number(event.target.textContent);
      const pageCount = this.pageCount;
      const currentPage = this.currentPage;
      const pagerCountOffset = this.pagerCount - 2;
      if (target.className.indexOf("more") !== -1) {
        if (target.className.indexOf("quickprev") !== -1) {
          newPage = currentPage - pagerCountOffset;
        } else if (target.className.indexOf("quicknext") !== -1) {
          newPage = currentPage + pagerCountOffset;
        }
      }
      /* istanbul ignore if */
      if (!isNaN(newPage)) {
        if (newPage < 1) {
          newPage = 1;
        }
        if (newPage > pageCount) {
          newPage = pageCount;
        }
      }
      if (newPage !== currentPage) {
        this.$emit("change", newPage);
      }
    },
  },

};
</script>
<style lang="scss" scoped>
.pager {
  padding: 20px 0;
  li {
    display: inline-block;
    padding: 0 4px;
    margin: 0 5px;
    min-width: 30px;
    font-size: 13px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 2px;
    background-color: #f4f4f5;
    color: #666;
    &.active {
      background-color: $baseColor;
      color: #fff;
    }
  }
  &-center {
      text-align: center;
  }
}
</style>